<template>
  <div id="app">
    <!-- <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
    <div>
      <van-cell title="选择单个日期" :value="date" @click="show = true" />
      <van-calendar v-model="show" @confirm="onConfirm" />
    </div>
    <div class="box"></div> -->
<router-view/>
  </div>
</template>

<script>
export default {
  data () {
    return {
      date: '',
      show: false
    }
  },
  methods: {
    formatDate (date) {
      return `${date.getMonth() + 1}/${date.getDate()}`
    },
    onConfirm (date) {
      this.show = false
      this.date = this.formatDate(date)
    }
  }
}
</script>

<style>
html,body {
  margin: 0;
  padding: 0
}
.box {
  /* px单位是固定的大小，不会随着浏览器宽度改变而改变，没有响应式 */
  /* 如果想我们的盒子有响应式，屏幕宽盒子边框，屏幕窄盒子变窄 */
  /* width: 187.5px; */
  /* 1px = 0.2667vw */
  /* 1vw = 3.75 */
  /* 50vw == 187.5 *  */
  /* 187.5 * 0.2667 = 50vw */
  /* 以后我们代码里面写单位是px， postcss会自动帮我们的代码以及vant-ui的代码  px全部转换为vw 实现响应式 */
  width: 187.5px;
  height: 50px;
  background-color: pink;
}
</style>
